<?php
require_once 'layout.php';

$title = "SSL证书产品";
$currentPage = "products";

$content = '
<section class="hero" style="padding: 60px 0;">
    <div class="container">
        <div class="hero-content">
            <h1>SSL证书产品</h1>
            <p>为不同需求提供专业的SSL证书解决方案，从个人网站到大型企业，我们都有合适的产品为您服务</p>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="products-filter" style="margin-bottom: 40px;">
            <div id="filter-tabs" class="filter-tabs" style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
                <button class="btn btn-outline brand-filter active" data-brand="">全部品牌</button>
                <!-- 品牌按钮将通过JavaScript动态加载 -->
            </div>
        </div>

        <div id="products-container" class="products-grid">
            <!-- 产品将通过JavaScript动态加载 -->
            <div class="loading-placeholder" style="grid-column: 1 / -1; text-align: center; padding: 60px 0;">
                <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid var(--border-gray); border-radius: 50%; border-top: 4px solid var(--primary-blue); animation: spin 1s linear infinite;"></div>
                <p style="margin-top: 20px; color: var(--text-light);">加载产品信息中...</p>
            </div>
        </div>
        
        <!-- 分页容器 -->
        <div id="pagination-container" style="margin-top: 40px;"></div>

        <div class="products-info" style="margin-top: 60px;">
            <h2 class="section-title">SSL证书类型说明</h2>
            <div class="info-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px;">
                <div class="info-card" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h3 style="color: var(--primary-blue); margin-bottom: 15px;">域名验证 (DV)</h3>
                    <ul style="list-style: none; color: var(--text-light);">
                        <li style="padding: 5px 0;">✓ 验证速度最快，5-10分钟签发</li>
                        <li style="padding: 5px 0;">✓ 价格最实惠，适合个人网站</li>
                        <li style="padding: 5px 0;">✓ 仅验证域名所有权</li>
                        <li style="padding: 5px 0;">✓ 浏览器显示加密标识</li>
                    </ul>
                </div>
                
                <div class="info-card" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h3 style="color: var(--primary-blue); margin-bottom: 15px;">组织验证 (OV)</h3>
                    <ul style="list-style: none; color: var(--text-light);">
                        <li style="padding: 5px 0;">✓ 验证企业身份信息</li>
                        <li style="padding: 5px 0;">✓ 1-3天完成验证</li>
                        <li style="padding: 5px 0;">✓ 更高的安全级别</li>
                        <li style="padding: 5px 0;">✓ 适合企业网站使用</li>
                    </ul>
                </div>
                
                <div class="info-card" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h3 style="color: var(--primary-blue); margin-bottom: 15px;">扩展验证 (EV)</h3>
                    <ul style="list-style: none; color: var(--text-light);">
                        <li style="padding: 5px 0;">✓ 最高级别的身份验证</li>
                        <li style="padding: 5px 0;">✓ 浏览器显示绿色地址栏</li>
                        <li style="padding: 5px 0;">✓ 5-7个工作日完成</li>
                        <li style="padding: 5px 0;">✓ 最高保险金额保障</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="support-section" style="margin-top: 80px; text-align: center; background: var(--bg-light); padding: 60px; border-radius: 12px;">
            <h2>需要帮助选择合适的证书？</h2>
            <p style="margin: 20px 0; color: var(--text-light);">我们的专业团队将为您提供免费的SSL证书咨询服务</p>
            <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 30px;">
                <a href="/contact" class="btn btn-primary">联系顾问</a>
                <a href="/help" target="_blank" class="btn btn-outline">查看文档</a>
            </div>
        </div>
    </div>
</section>

<style>
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.filter-tabs .brand-filter.active {
    background: var(--primary-blue);
    color: white;
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 0;
    color: var(--text-light);
    font-size: 1.2rem;
}

.product-card {
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-large {
    padding: 15px 30px;
    font-size: 1.1rem;
    min-width: 200px;
}

/* 分页样式 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 30px 0;
}

.pagination-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-gray);
    background: white;
    color: var(--text-dark);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.pagination-btn:hover {
    background: var(--hover-gray);
    border-color: var(--primary-blue);
}

.pagination-btn.active {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-ellipsis {
    padding: 8px 4px;
    color: var(--text-light);
}

.pagination-info {
    text-align: center;
    color: var(--text-light);
    font-size: 14px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .filter-tabs {
        justify-content: flex-start !important;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    
    .filter-tabs .brand-filter {
        flex-shrink: 0;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: 1fr !important;
    }
    
    .pagination {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .pagination-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}
</style>

<script src="/static/js/product-list.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // 初始化产品页面
    if (typeof initProductsPage === "function") {
        initProductsPage();
    }
});
</script>
';

renderPage($title, $content, $currentPage);
?>